
$tab-label-height:3.5em;

.tab-bar {
    @include clearfix;
    margin: 0;
    padding: 0;
    list-style: none;

    li {

        display: block;
        float: left;
        height: $tab-label-height;

        @include breakpoint(mobile-only) {
            width: 100%;
            span, a {
                width: 100%;
                text-align: center;
            }
        }
    }

    span, a {
        @extend .default-animation;
        display: inline-block;
        padding: 0 4rem;
        line-height: $tab-label-height;
    }
}

/* used for wrapper animation after the load of the page */
@include keyframes(show) {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.form-tabs {
    margin-top: -2rem;

    @include breakpoint(mobile-only){
        padding-top: 4rem;
    }

    > input[type=radio] {
        display:none;
    }
    > label {
        @extend .default-animation;
        display:inline-block;
        cursor: pointer;
        height: $tab-label-height;
        text-align:center;
        line-height: $tab-label-height;
        padding: 0 2rem;

        @include breakpoint(mobile-only){
            width: 100%;
        }

        &:last-of-type {
            border-bottom:none;
        }
    }
}


.tab-body {
    position:absolute;
    display: none;
    opacity: 0;
    width: 100%;
}

.tab-body-wrapper {
    padding-top: $tab-label-height;
}

[id^="tab-"][id$="1"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="1"],
[id^="tab-"][id$="2"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="2"],
[id^="tab-"][id$="3"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="3"],
[id^="tab-"][id$="4"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="4"],
[id^="tab-"][id$="5"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="5"],
[id^="tab-"][id$="6"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="6"],
[id^="tab-"][id$="7"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="7"],
[id^="tab-"][id$="8"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="8"],
[id^="tab-"][id$="9"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="9"],
[id^="tab-"][id$="10"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="10"] {
    position: relative;
    display: block;
    opacity: 1;
}
